<template>
	<div id="coming">
		<ul>
			<li v-for="item in data" class="clearfix" @click="Location(item.id)">
				<div class="img_box fl">
					<img :src="item.poster.origin" />
				</div>
				<div class="film_desc fl">
					<div class="film_name">
						<span>{{item.name}}</span>
					</div>
					<div class="film_intro">
						<span>{{item.intro}}</span>
					</div>
					<div class="film_counts">
						<span>{{gettime(item.premiereAt)}}</span><span>上映&nbsp;&nbsp;&nbsp;&nbsp;</span>
						<span>{{time(item.premiereAt)}}</span>
					</div>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	import axios from "axios";
	export default {
		created: function() {
			var now_this = this;
			axios.get("https://m.maizuo.com/v4/api/film/coming-soon?", {
				params: {
					count: 6,
					page: this.now_page,
				}
			}).then(function(res) {
				//成功的回调
				now_this.data = res.data.data.films;
			}).catch(function(err) {
				//失败的回调
				console.warn(err)
			});
		},
		mounted: function(){
			
		},
		data: function() {
			return {
				data: "",
			}
		},
		methods: {
			Location: function(p) {
				this.$router.push({
					path: "/details",
					query: {
						id: p,
						now_page: 1,
					}
				});
			},
			gettime: function(time) {
				var time = new Date(time);
				return(time.getMonth() + 1) + "月" + time.getDate() + "日";
			},
			time: function(time) {
				var time = new Date(time);
				switch(time.getDay()) {
					case 1:
						return "星期一";
						break;
					case 2:
						return "星期二";
						break;
					case 3:
						return "星期三";
						break;
					case 4:
						return "星期四";
						break;
					case 5:
						return "星期五";
						break;
					case 6:
						return "星期六";
						break;
					case 7:
						return "星期天";
						break;
				}
			}
		}
	}
</script>

<style lang="scss">
	@import "../scss/coming.scss";
</style>